﻿function Slider(p_ctx, p_left, p_top)
{
// NOTE: Make sure all attributes are initialized before being used, especially for child elements !!!

// -------------------------------------------------------------------------------------------------------
// INTERNALS 
// -------------------------------------------------------------------------------------------------------
   
    this.selected_tile = null;
    this.hover_tile = null;
    this.dragging = false;
    this.tile_padding = 5;
    this.ProcessSelection = function (p_selected_tile)
    {
        var value_changed = false;        
        if (p_selected_tile != this.selected_tile) value_changed = true;
        this.selected_tile = p_selected_tile;
        if (value_changed) if (this.onValueChanged) this.onValueChanged(this.getValue());
    }

// -------------------------------------------------------------------------------------------------------
// METHODS 
// -------------------------------------------------------------------------------------------------------
    this.getTileWidth = function () { return this.width / (this.getNumTiles()); }
    this.getNumTiles = function() { return 1 + Math.ceil((this.max_value - this.min_value) / this.interval); }
    

// -------------------------------------------------------------------------------------------------------
// CUSTOM EVENTS 
// -------------------------------------------------------------------------------------------------------
    this.onValueChanged = null;


// -------------------------------------------------------------------------------------------------------
// CUSTOM PROPERTIES 
// -------------------------------------------------------------------------------------------------------    
    this.min_value = 0;
    this.getMinValue = function () { return this.min_value; }
    this.setMinValue = function (p_value) { this.min_value = p_value; }

    this.max_value = 10;
    this.getMaxValue = function () { return this.max_value; }
    this.setMaxValue = function (p_value) { this.max_value = p_value; }

    this.interval = 1;
    this.getInterval = function () { return this.interval; }
    this.setInterval = function (p_interval) { this.interval = p_interval; }

    this.getValue = function () { return this.min_value + (this.selected_tile * this.interval); }
    this.setValue = function (p_value) { this.selected_tile = p_value / this.interval; }

    this.hover_color = "silver";
    this.getHoverColor = function () { return this.back_color; }
    this.setHoverColor = function (p_color) { this.back_color = p_color; }

    this.show_value = false;
    this.getShowValue = function () { return this.show_value; }
    this.setShowValue = function (p_show) { this.show_value = p_show; }

// -------------------------------------------------------------------------------------------------------
// STOCK PROPERTIES
// -------------------------------------------------------------------------------------------------------
    this.display_target = ""; // 'mobile', 'pc'
    this.getDisplayTarget = function () { return this.display_target; }
    this.setDisplayTarget = function (p_target) { this.display_target = p_target; }    

    this.color = "white"; // used for text color, usually
    this.getColor = function () { return this.color; }
    this.setColor = function (p_color) { this.color = p_color; }


    this.back_color = "gray";
    this.getBackColor = function () { return this.back_color; }
    this.setBackColor = function (p_color) { this.back_color = p_color; }

    this.fore_color = "black";
    this.getForeColor = function () { return this.fore_color; }
    this.setForeColor = function (p_color) { this.fore_color = p_color; }    

    this.getHasFocus = function () { return this.hasFocus; }
    this.setHasFocus = function (p_focus) { this.hasFocus = p_focus; }
    this.setHasFocus(false);

    this.getText = function () { return this.text; }
    this.setText = function (p_text) { this.text = p_text; }
    this.setText("");

    this.getTop = function () { return this.top; }
    this.setTop = function (p_top) { if (p_top >= 0) this.top = p_top; }
    this.setTop(p_top ? p_top : 0);

    this.getLeft = function () { return this.left; }
    this.setLeft = function (p_left) { if (p_left >= 0) this.left = p_left; }
    this.setLeft(p_left ? p_left : 0);

    this.getHeight = function () { return this.height; }
    this.setHeight = function (p_height) { if (p_height >= 0) this.height=p_height; }
    this.setHeight(50);

    this.getWidth = function () { return this.width; }
    this.setWidth = function (p_width) { if (p_width >= 0) this.width=p_width; }
    this.setWidth(200);

    this.getContext = function () { return this.ctx; }
    this.setContext = function (p_ctx) { this.ctx = p_ctx; }
    this.ctx = p_ctx ? p_ctx : null;

    this.font = "12pt Calibri";
    this.getFont = function () { return this.font; }
    this.setFont = function (p_font) { this.font = p_font; } 

// --------------------------------------------------------------------------------------------------
// EVENT HANDLERS
//---------------------------------------------------------------------------------------------------

    this.mouseMove = function (p_x, p_y)
    {
        if (this.dragging)
            this.ProcessSelection(Math.floor(p_x / this.getTileWidth()));
        else
            this.hover_tile = Math.floor(p_x / this.getTileWidth());
        if (this.onMouseMove)
            this.onMouseMove(p_x, p_y);
    }

    this.click = function (p_x, p_y)
    {
        this.ProcessSelection(Math.floor(p_x / this.getTileWidth()));
        if (this.onClick)
            this.onClick(p_x, p_y);
    }
    this.mouseOver = function (p_x, p_y)
    {
        if (this.onMouseOver)
            this.onMouseOver(p_x, p_y);
    }
    this.mouseOut = function () //no coordinates
    {
        this.hover_tile = null;
        
        if (this.onMouseOut)
            this.onMouseOut();
    }
    this.mouseDown = function (p_x, p_y)
    {
        this.dragging = true;
        if (this.onMouseDown)
            this.onMouseDown(p_x, p_y);
    }
    this.mouseUp = function (p_x, p_y)
    {
        this.dragging = false;
        if (this.onMouseUp)
            this.onMouseUp(p_x, p_y);
    }
    this.keyDown = function (key) //for control key events
    {
        var rslt = false;
        if (this.onKeyDown)
            rslt = this.onKeyDown(key);
        return rslt;
    }
    this.keyPress = function (key) //for printable character keys
    {        
        if (this.onKeyPress)
            this.onKeyPress(key);
    }

    this.render = function ()
    {
        /*var gradient = context.createLinearGradient(this.left, this.top, this.left + this.getWidth(), this.top + this.getHeight());
        this.ctx.textBaseline = "bottom";
        gradient.addColorStop(0, 'red');
        //gradient.addColorStop(0.5, 'gold');
        gradient.addColorStop(1, 'gold');
        */

        this.ctx.font = this.font;
        for (var i = 0; i < this.getNumTiles(); i++)
        {
            this.ctx.fillStyle = this.back_color;
            if (i == this.hover_tile) this.ctx.fillStyle = this.hover_color;
            if (i == this.selected_tile) this.ctx.fillStyle = this.fore_color;

            this.ctx.fillRect
		    (
			    this.left + this.tile_padding + (i * this.getTileWidth()),
			    this.top + this.tile_padding,
			    this.getTileWidth() - this.tile_padding,
			    this.height - (2 * this.tile_padding)
		    );
            if (this.show_value && i == this.selected_tile)
            {
                this.ctx.fillStyle = this.color;
                this.ctx.fillText
                (
                    this.getValue(),
                    this.left + this.tile_padding + (i * this.getTileWidth()) + (this.getTileWidth()/3),
                    this.top + this.tile_padding + (this.height/2)
                );
            }
        }

    }
    //this.render();
}
